<template>
    <div class="auth-resource-tree">
        <el-dialog
            v-model="resourceTreeDialogVisible"
            width="40%"
            :title="show ? '授予：' + owner.name : '这是一个错误页面'"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="$emit('update:show', false)"
            destroy-on-close
            top="8vh">
            <el-tree ref="resouTree" :data="resouTreeData"
                     node-key="id"
                     :props="resouTreeProps"
                     show-checkbox
                     :default-checked-keys="initSelectedKeys"
                     default-expand-all/>
            <template #footer>
                <span>
                    <el-button type="primary" plain @click="saveGrant(owner.id)">授权</el-button>
                    <el-button type="warning" plain @click="revokeAll(owner.id)">回收所有</el-button>
                    <el-button type="info" plain @click="resourceTreeDialogVisible = false">关闭</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script>
import resourceReq from '@/services/resource/request'
import roleReq from '@/services/role/request'

export default {
    name: 'AuthResourceTree',
    props: {
        show: {
            type: Boolean,
            default: false,
        },
        owner: {
            type: Object, // 授予对象
            default: null
        }
    },
    watch: {
        show() {
            if (this.show) {
                if (this.owner && this.owner.id)
                    this.loadOwnResource(this.owner.id)
                else this.initSelectedKeys = []
                this.loadAllResource()
                this.resourceTreeDialogVisible = this.show
            }
        },
    },
    /*mounted() {
        // 加载所有资源
        this.loadAllResource()
    },*/
    data() {
        return {
            resourceTreeDialogVisible: false,
            resouTreeData: [],
            resouTreeProps: {
                label: 'name',
                children: 'children',
            },
            initSelectedKeys: [],
        }
    },
    methods: {
        async saveGrant(roleId) {
            let keys = this.$refs.resouTree.getCheckedKeys();
            let keys1 = this.$refs.resouTree.getHalfCheckedKeys();
            if (keys && keys.length < 1) {
                this.$message.warning('请先选择权限项')
                return
            }

            for (let i = 0; i < keys1.length; i++) keys.push(keys1[i])

            let obj = {}
            obj.roleId = roleId
            obj.resourceIds = keys
            let r = await roleReq.grant(obj)
            if (r.code === 0) {
                this.$message.success('操作成功')
                this.resourceTreeDialogVisible = false
            } else {
                this.$message.error('授权失败')
            }

        },
        async revokeAll(roleId) {
            console.log("role id ==> " + roleId)
            let r = await roleReq.revokeAll({}, [roleId])
            if (r.code === 0) {
                this.$message.success('操作成功')
                this.resourceTreeDialogVisible = false
            } else {
                this.$message.error('权限回收失败')
            }
        },
        async loadAllResource() {
            let r = await resourceReq.listTree()
            if (r.code === 0) {
                this.resouTreeData = r.data
            } else {
                this.$message.error('加载已有的权限列表失败')
            }
        },
        async loadOwnResource(id) {
            let r = await resourceReq.list({roleId: id})
            if (r.code === 0) {
                let d = r.data ? r.data : []
                let arr = []
                for (let i = 0; i < d.length; i++) {
                    arr.push(d[i].id)
                }
                this.initSelectedKeys = arr;
                console.log('已有权限：' + arr)
            } else {
                this.$message.error('加载已有的权限列表失败')
            }
        }
    },
}
</script>


<style lang="scss">
.auth-resource-tree {
    .el-dialog__body {
        max-height: 240px;
        overflow-y: scroll;
    }
    .el-tree {
        max-height: 180px;
    }
}
</style>